/* Also exist inside squireEditor.js */
.proton-embedded:not([src]) {
    position: relative;
    min-height: 38px; /* placeholder */
    border: 1px solid;
    border-color: #444 #CCC #CCC #444;
    background: url(assets('img/icons/broken-img.png')) no-repeat 0 50% $white;
}

/** safari can't override the img border on non-src img
    chrome can't override the img border on non-src, non-alt img
    so to not display double border remove our border **/
.ua-chrome .proton-embedded:not([src]):not([alt]),
.ua-safari .proton-embedded:not([src]) {
    border: 0;
}

/** ie, edge, safari can't add ::after content properly on alt img, so offset our background to compensate for their forced text */
.ua-ie .proton-embedded[alt]:not([src]),
.ua-edge .proton-embedded[alt]:not([src]),
.ua-safari .proton-embedded[alt]:not([src]) {
    background-position-y: 80%;
}

/** browser bug? img without alt does not get ::after element, so display the broken img background in the middle */
.proton-embedded:not([src]):not([alt]) {
    background-position-x: 50%;
}

/** img with ALT but not SRC we can display ::after on chrome and firefox */
.proton-embedded[alt]:not([src])::after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: " " attr(alt);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 0 0 20px;
    color: rgba(0,0,0,0.5);
    background: url(assets('img/icons/broken-img.png')) no-repeat 0 50% $white; /* override the background in far left */
}

/* Responsiveness of our embedded images */

.proton-embedded:not([width]):not([style*="width"]) {
    /*  1. do not handle responsivess if there is a width attribute / inline width style
        2. do not set auto height as long as it's not need to handle our embedded images (no height attribute)
        3. set at least a min width or it's possible it won't be shown
    */
    max-width: 100%;
    min-width: 38px;
}
